<template>
  <div>
    <b-navbar
      toggleable="lg"
      type="dark"
      variant="dark"
      id="menu_nav"
      class="grey darken-1"
    >
      <b-navbar-brand href="/">没有终点的旅途</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item @click="toMain">首页</b-nav-item>
          <b-nav-item @click="toAbout">关于</b-nav-item>
          <b-nav-item @click="toTimeLine">时间线</b-nav-item>

          <b-nav-item href="#" disabled> &nbsp;&nbsp;</b-nav-item>
          <!-- <b-nav-form>
            <b-form-input
              size="sm"
              class="mr-sm-2"
              placeholder="Search"
            ></b-form-input>
            <b-button size="sm" class="my-2 my-sm-0" type="submit"
              >Search</b-button
            >
          </b-nav-form> -->
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>


<script>
export default {
  components: {},
  methods: {
    toTimeLine() {
      this.$router.push({
        name: "timeline",
      });
    },
    toMain() {
      this.$store.commit("CHANGGELIST", {
        url: "/arcticle/getArcticlePage",
        router: "ArticleList",
      });
      this.$store.commit("CHANGETAGID", 0);
      this.$axios
        .get("/arcticle/getpagedata", {
          params: {
            current: "1",
          },
        })
        .then((resp) => {
          this.$store.commit("TAGTOMAIN", resp.data.data.allPages);

          this.$store.commit("TOMAIN", false);
        });

// 这里的参数current 在未使用current之前为0 为了让路由刷新。
      this.$router.push({
        name: "ArticleList",
        query: {
          current: 1,
        },
      });
    },
    toAbout() {
      this.$router.push({
        name: "about",
      });
    },
  },
};
</script>

<style scoped>
#menu_nav {
  box-shadow: 0 0 10px 3px gray;
}
</style>